<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <link rel="icon" href="favicon.png" type="image/x-icon">
  <title>四川贝贝语音科技发展有限责任公司</title>
  <link rel="stylesheet" href="/mobile/css/swiper-bundle.min.css" />
  <script src="/mobile/js/swiper-bundle.min.js"></script>
  <style>
  html,
  body {
    position: relative;
    height: 100%;
  }

  body {
    background: #eee;
    font-family: '微软雅黑';
    font-size: 14px;
    color: #000;
    margin: 0;
    padding: 0;
    user-select: none;
  }

  .swiper {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
  }

  .bg {
    width: 100%;
    height: 100%;
    background: url(/mobile/img/web-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
  }
  .left1  {
    position: absolute;
    left: 131px;
  }
  .right1 {
    height: 50vw;
    position: absolute;
    right: 106px;
  }
  .donwload-btn {
    display: flex;
  }
  .text-1 {
    width: 34.0104vw;
    margin-bottom: 50px;
  }
  .btn-box {
    width: 14.0625vw;
    line-height: 5.0520vw;
    text-align: center;
    background: #fff;
    color: #000;
    border-radius: 17px;
    font-size: 0;
    margin-right: 1.6666vw;
  }
  .btn-box:hover {
    background: linear-gradient( 270deg, #9358F4 0%, #6E53F3 100%);
  }
  .btn-box a {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #000;
  }
  .btn-box a:hover {
    color: #fff;
  }
  .btn-box span {
    vertical-align: middle;
    margin-left: 17px;
    line-height: 1;
    font-size: 1.77vw;
  }
  .btn-box:last-child {
    margin-left: 32px;
  }
  .a-1 {
    filter: brightness(0);
    vertical-align: middle;
  }
  .btn-box:hover .a-1 {
    filter: brightness(100);
  }
  .left2 {
    left: 150px;
    height: 46.8229vw;
    position: absolute;
  }
  .right2 {
    right: 161px;
    height: 13.8020vw;
    position: absolute;
  }
  .left3 {
    left: 132px;
    height: 14.1145vw;
    position: absolute;
  }
  .right3 {
    right: 0;
    height: 51.5625vw;
    position: absolute;
  }
  .left4 {
    left: 120px;
    height: 45.5208vw;
    position: absolute;
  }
  .right4 {
    right: 151px;
    height: 14.1666vw;
    position: absolute;
  }
  .top-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 80px;
    width: 100%;
    z-index: 9999;
    background: rgba(0, 0, 0, .3);
    display: flex;
    align-items: center;
    padding: 0 150px;
    box-sizing: border-box;
  }
  .last1 {
    height: 5.9375vw;
    position: absolute;
    top: 7.8125vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .contact-items {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5.2083vw;
  }
  .contact-item {
    font-size: 1.875vw;
    font-weight: bold;
  }
  .contact-item img {
    width: 11.9791vw;
  }
  .footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 200px;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    padding: 0 8.8541vw;
    box-sizing: border-box;
  }
  .footer .btn-box {
    border: 2px solid #000;
  }
  .footer .btn-box:hover {
    border-color: transparent;
  }
  .link {
    list-style: none;
    display: flex;
    padding: 0;
    margin: 9px 0;
  }
  .link li {
    margin-left: 2.8125vw;
  }
  .link a {
    text-decoration: none;
    color: #000;
    font-size: 0.8333vw;
  }
  .qr-code {
    width: 5.0520vw;
    height: 5.0520vw;
    border: 2px solid #000;
    border-radius: 17px;
  }
  .footer-right {
    margin-left: 7.8125vw;
  }
  .down-btn {
    width: 40px;
    height: 40px;
    position: absolute;
    z-index: 99;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.4;
  }
  .copyright {
    font-size: 12px;
    text-align: left;
    color: #8c8c8c;
  }
  .logo-link {
    font-size: 0;
  }
  .eye {
    width: 67px;
    height: 67px;
    background: url(/mobile/img/laugh-face.png);
    background-repeat: no-repeat;
    position: absolute;
    left: 48.4375vw;
    top: 40vh;
    z-index: 99;
    transform: rotate(-30deg);
  }
  .eye img {
    width: 20px;
    height: 20px;
    margin-top: 7px;
    animation: eyeShine 5s infinite;
  }
  @keyframes eyeShine {
    0%,50%,to {
      opacity: 1;
      transform: scale(1.4);
    }

    25%,75% {
      opacity: 0;
      transform: scale(0.8);
    }
  }
  @keyframes flash {
    0%,50%,to {
      opacity: 1;
    }

    25%,75% {
      opacity: 0;
    }
  }
  .love {
    position: absolute;
    right: 140px;
    animation: loveBig 20s infinite;
  }
  @keyframes loveBig {
    0%,50%,to {
      opacity: 0.7;
      transform: scale(1);
    }

    25%,75% {
      opacity: 0.4;
      transform: scale(1.2);
    }
  }

  </style>
</head>

<body>
  <div class="swiper">
    <div class="top-bar">
      <a class="logo-link" href="/">
        <img class="logo" src="/mobile/img/web-logo.png" alt="">
      </a>
    </div>
    <img class="down-btn" src="/mobile/img/down-btn.png" alt="">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <div class="bg">
          <img class="love" src="/mobile/img/love.png" alt="">
          <div class="eye">
            <img src="/mobile/img/eye-left.png" alt="" class="eye-left">
            <img src="/mobile/img/eye-right.png" alt="" class="eye-right">
          </div>
          <div class="left1">
            <img class="text-1" src="/mobile/img/1-1.png" alt="">
            <div class="donwload-btn">
              <div class="btn-box">
                <a href="https://apk.zgbbyy.com/app/bbyy.apk" target="_blank">
                  <img class="a-1" src="/mobile/img/android1.svg" alt="" width="36" height="36"><span>Android</span>
                </a>
              </div>
              <div class="btn-box">
                <a href="https://apps.apple.com/cn/app/id6445904230" target="_blank">
                  <img class="a-1" src="/mobile/img/ios1.svg" alt="" width="36" height="36"><span>App Store</span>
                </a>
              </div>
            </div>
          </div>
          <img src="/mobile/img/1-2.png" alt="" class="right1">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="bg">
          <img src="/mobile/img/2-1.png" alt="" class="left2">
          <img src="/mobile/img/2-2.png" alt="" class="right2">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="bg">
          <img src="/mobile/img/3-1.png" alt="" class="left3">
          <img src="/mobile/img/3-2.png" alt="" class="right3">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="bg">
          <img src="/mobile/img/4-1.png" alt="" class="left4">
          <img src="/mobile/img/4-2.png" alt="" class="right4">
        </div>
      </div>
      <div class="swiper-slide">
        <div class="bg">
          <img class="last1" src="/mobile/img/5-1.png" alt="">
          <div class="contact-items">
            <div class="contact-item">
              <img src="/mobile/img/icon-wx.png" alt="">
              <div>公众号</div>
            </div>
            <div class="contact-item">
              <img src="/mobile/img/icon-wb.png" alt="">
              <div>微博</div>
            </div>
            <div class="contact-item">
              <img src="/mobile/img/icon-tt.png" alt="">
              <div>抖音</div>
            </div>
            <div class="contact-item">
              <img src="/mobile/img/icon-rb.png" alt="">
              <div>小红书</div>
            </div>
          </div>
          <div class="footer">
            <div class="footer-left">
              <div class="donwload-btn">
                <div class="btn-box">
                  <a href="https://apk.zgbbyy.com/app/bbyy.apk" target="_blank">
                    <img class="a-1" src="/mobile/img/android1.svg" alt="" width="36" height="36"><span>Android</span>
                  </a>
                </div>
                <div class="btn-box">
                  <a href="https://apps.apple.com/cn/app/id6445904230" target="_blank">
                    <img class="a-1" src="/mobile/img/ios1.svg" alt="" width="36" height="36"><span>App Store</span>
                  </a>
                </div>
                <img class="qr-code" src="/mobile/img/apk-download.png" alt="" width="36" height="36">
              </div>
            </div>
            <div class="footer-right">
              <ul class="link">
                <li>
                  <a href="./about.html">关于我们</a>
                </li>
                <li>
                  <a href="./contact.html">联系我们</a>
                </li>
                <li>
                  <a href="https://www.zgbbyy.com/mobile/common/index.html?id=2">公会协议</a>
                </li>
                <li>
                  <a href="https://www.zgbbyy.com/mobile/common/index.html?id=10">主播协议</a>
                </li>
                <li>
                  <a href="https://www.zgbbyy.com/mobile/common/index.html?id=4">服务协议</a>
                </li>
                <li>
                  <a href="https://www.zgbbyy.com/mobile/common/index.html?id=3">隐私政策</a>
                </li>
              </ul>
              <ul class="link">
                <li>
                  <a href="#">客服热线：028-85099333</a>
                </li>
                <li>
                  <a href="mailto:zgbbyy@qq.com">邮箱：zgbbyy@qq.com</a>
                </li>
              </ul>
              <ul class="link">
                <li>
                  <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">蜀ICP备2023011970号-1</a>
                </li>
              </ul>
              <ul class="link">
                <li class="copyright">Copyright&copy; 2024 四川贝贝语音科技发展有限责任公司. 版权所有<br>Sichuan Beibei Speech Sounds Science & Technology Development Co.,Ltd.Allrightsreserved.Copyright&copy;
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script>
const swiper = new Swiper('.swiper', {
  direction: 'vertical',
  mousewheel: true
})
createStar()
function createStar () {
  var clientWidth = document.body.clientWidth
  var clientHeight = document.body.clientHeight
  for (var i = 0; i < 20; i++) {
    var left = Math.random() * clientWidth
    var topHeight = Math.random() * clientHeight
    var size = Math.random() * 40 + 10 +'px'
    var img = document.createElement('img')
    img.className = 'star'
    img.src = '/mobile/img/star.png'
    img.style.position = 'absolute'
    img.style.width = size
    img.style.height = size
    img.style.left = left + 'px'
    img.style.top = topHeight + 'px'
    img.style.zIndex = 99
    var time = (Math.random() * 5 + 2).toFixed(2) + 's'
    var delay = (Math.random() * 2 + 2).toFixed(2) + 's'
    img.style.animationName = 'flash'
    img.style.animationDelay = delay
    img.style.animationDuration = time
    img.style.animationIterationCount = 'infinite'
    document.querySelector('.swiper').appendChild(img)
  }
}

</script>

</html>